<template>
	<view class="rank-page">
			<view class="rank-items">
				<block v-for="(rank,idx) in rankList" :key="idx">
					<view class="rank">
						<view class="user-avatar-container">
							  <image class="user-avatar" :src="rank.user.photo"></image>
						</view> 
						<view class="rank-data">
							<view class="user-meta">
								<text class="user-name">{{rank.user.nickname}}</text>
								<text class="user-score">{{rank.scope}} 分</text>
							</view>
						</view> 
					</view>
				</block>
				<!--玩家本身的信息  -->
				  <view class="userinfo">
						<image class="userinfo-avatar" :src="userInfo.photo" background-size="cover"></image>
						<view class="userinfo-nickname">
						  <text class="userinfo-nickname">{{userInfo.nickname}}在2048小游戏中排名</text>
						  <text class="userinfo-rank">{{userInfo.rank}}, </text>
						  <text class="userinfo-maxscore">
						  当前{{userInfo.highscore}}分
						  </text>
						</view>
				  </view>
			</view>
			
			<!-- 游戏分享 -->
			<view class="buttons">
				<button class="buttoncss" bindtap="onShareAppMessage" open-type="share">邀请朋友</button>
			</view>
	</view>
</template>

<script>
	import myApp from "../../App.vue";
	export default {
		data() {
			return {
			//当前游戏玩家
			userInfo:{
				nickname: '昵称', 
				photo: this.$imageUrl+"1264135e07e44116aa47cadc485e1c05.jpg",
				highscore:220,
				rank:1
			}, 
			//排行榜信息
			rankList:""	 
			}
		},
		methods: {
			//获取排行榜数据
			getRankList(){
				var that = this;
				uni.request({
					url: that.$websiteUrl + "/getScopeRank",
					header: {
						//	token:that.$getToken()
						token: this.$getToken()
					},
					success: (res) => {
						console.log("ranklist_" + res.data.data);
						this.rankList = res.data.data;
						console.log(this.rankList.length);
						for(var i=0;i<this.rankList.length;i++){
							if(this.rankList[i].user.photo==null){
								this.rankList[i].user.photo =that.$imageUrl+"02d2ccf1178a4b63a99161ed54304988.jpg";
							}else{
								this.rankList[i].user.photo =that.$imageUrl+this.rankList[i].user.photo;
							}
						}
						
					}
				});
			},
			//获取自己的排行榜数据
			getMyRankList(){
				var that = this;
				uni.request({
					url: that.$websiteUrl + "/getUserMsg",
					header: {
						//	token:that.$getToken()
						token: "asd6a4w6d46aw46asd"
					},
					success: (res) => {
						this.userInfo.nickname = res.data.data.nickname;
						this.userInfo.photo = res.data.data.photo;
						this.userInfo.photo= that.$imageUrl+this.userInfo.photo;
					}
				});
			},
			//获取自己的最高分
			getHightScope(){
				var that = this;
				uni.request({
					url: that.$websiteUrl + "/getHightScope",
					header: {
						//	token:that.$getToken()
						token: "asd6a4w6d46aw46asd"
					},
					success: (res) => {
						this.userInfo.highscore = res.data.data.scope;
						this.userInfo.rank = res.data.data.sort;
						console.log(this.userInfo);
					}
				});
			}
		},
		onLoad() {
			this.getRankList();
			this.getMyRankList();
			this.getHightScope();
		},
		  /**
		 * 用户点击右上角分享
		 */
		 onShareAppMessage(){
		      return {
		        title: '诚邀你一起来挑战2048排行！',
				imageUrl: "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1591778432&di=a2d7136fdcd0762d40fb005ceb18cc58&src=http://dingyue.nosdn.127.net/FPk07clKtcNGDYgclqvBwmX2dHfeXonyadnce9nTiyxYV1537869595480.jpeg",
		        path: '/pages/index/index'
		      }
		    }
	}
</script>

<style>
@import url("./rank-list.css");
</style>
